<template>
    <div>
        <el-menu :default-active="active" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            :collapse="collapse">
            <div v-for="(item,index) in menuList" :key="index">
                    <el-submenu :index="item.path" v-if="item.children">
                        <template slot="title">
                            <span slot="title">{{ item.name }}</span>
                        </template>
                        <template v-if="item.children">
                            <el-menu-item-group v-for="(value,i) in item.children" :key="i">
                            <el-menu-item :index="value.path" @click="handleClick(value)">{{ value.name }}</el-menu-item>
                        </el-menu-item-group>
                        </template>
                    </el-submenu>
                    <el-menu-item v-else :index="item.path" @click="handleClick(item)">{{ item.name }}</el-menu-item>
            </div>
        </el-menu>
    </div>
</template>
<script>
export default {
    // 菜单组件需要使用到的数据，所以只能是传参
    props: {
        // 菜单是否收起
        collapse: {
            type: Boolean,
            default: false
        },
        // 做菜单的数据
        menuList: {
            type: Array,
            required: true
        },
        active: {
            type: String,
            required: true
        },
    },
    data() {
        return {
        }
    },
    watch: {
        menuList(val) {
            console.log('菜单数据', val);
        }
    },
    mounted() {
    },
    methods: {
        makeMenu() {

        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        // 菜单点击事件
        handleClick(item) {
            let path = item.path
            this.$router.push(path)
            this.$emit('menuClick', item)
        },
    }
}
</script>
